<template>
  <div class="alarmConfiguration zy-content">
    <!-- 调拨 -->
    <div class="searchBox search-box-layout">
      <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
    </div>
    <div class="alarmConfiguration">
      <div class="list-layout mt16">
        <!-- 表格 -->
        <div class="btns clear">
          <span class="title">{{ $t("common.listInformation") }}</span>
          <Button @click="handleAdd">新增</Button>
        </div>
        <div class="tableContent">
          <el-table ref="table" :data="infoList" style="width: 100%" :height="tableHeight" row-key="id" border
                    :stripe="false"
                    @expand-change="handleExpandChange" :header-cell-style="tableHeaderColor" emptyText="暂无数据"
                    v-if="isTableVisible">
            <el-table-column type="expand" align="center">
              <template slot-scope="scope">
                <div class="cil-table no-padding">
                  <!--                子级 展开表-->
                  <el-table ref="tableCil" border size="small" :data="scope.row.children" emptyText="暂无数据"
                  >
                    <el-table-column
                        type="index"
                        width="50"
                        label="序号"
                        align="center"/>
                    <el-table-column label="物料名称" prop="materialName" min-width="150" align="center"
                                     show-overflow-tooltip/>
                    <el-table-column type label="数量" prop="materialCount" min-width="150" align="center"
                                     show-overflow-tooltip/>
                    <el-table-column label="批号" prop="batchNumber" min-width="150" align="center"
                                     show-overflow-tooltip/>
                    <el-table-column label="操作" fixed="right" width="100" align="center" v-if="scope.row.allotStatus != 3" >
                      <template slot-scope="scopes">
                          <div class="operationBtn" @click="handleEditRow(scopes.row)">
                            <Icon type="md-list-box"/>
                            出库
                          </div>
<!--                          <div class="operationBtn" @click="handleEditRowIn(scopes.row)">-->
                          <!--                            <Icon type="md-list-box"/>-->
                          <!--                            入库-->
                          <!--                          </div>-->
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                type="index"
                width="50"
                label="序号"
                align="center">
            </el-table-column>
            <el-table-column label="任务单号" prop="code" min-width="150" show-overflow-tooltip align="center"/>
            <el-table-column label="业务类型" prop="transferType" :formatter="transferTypeFormatter" min-width="100"
                             show-overflow-tooltip align="center"/>
            <el-table-column label="出库储位" prop="sourceStorageName" min-width="150" show-overflow-tooltip
                             align="center"/>
            <el-table-column label="入库储位" prop="targetStorageName" min-width="150" show-overflow-tooltip
                             align="center"/>
            <el-table-column label="创建人" prop="createUser" min-width="150" show-overflow-tooltip align="center"/>
            <el-table-column prop="allotStatus" align="center" min-width="80" label="单据状态" :formatter="formatStatus"/>
            <el-table-column label="操作" min-width="150" align="center">
              <template slot-scope="scope">
                <div style="display: flex;justify-content: center">
                  <div class="operationBtn" style="color: #999" @click="detailRow(scope.row)">
                    <Icon type="md-list-box" color="#999" style="margin-right: 8px"/>
                    详情
                  </div>
                  <div class="operationBtn" style="color: #999" @click="overRow(scope.row)"
                       v-if="scope.row.allotStatus != 3">
                    <Icon type="md-list-box" color="#999" style="margin-right: 8px"/>
                    完结
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>


          <!--            仓位管理表-->
          <!--          <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columns"-->
          <!--                 row-key="id" :load-data="handleLoadData"-->
          <!--                 :height="tableHeight"-->
          <!--                 ellipsis ref="selection" :data="infoList">-->
          <!--            <template slot-scope="{ row }" slot="action">-->
          <!--              <div v-if="!row.children" class="operationBtn" @click="handleEditRow(row)" style="color: #0d69f8">-->
          <!--                <Icon type="md-calendar" color="#0d69f8" style="margin-right: 8px"/>-->
          <!--                出库-->
          <!--              </div>-->

          <!--              <div v-else class="operationBtn" @click="detailRow(row)">-->
          <!--                <Icon type="md-list-box" style="margin-right: 8px"/>-->
          <!--                详情-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </Table>-->
          <div class="pageWrap mt16">
            <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                  @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
          </div>
        </div>
      </div>
    </div>
    <Modal :mask-closable="false" v-model="outShow" title="出库" class="modal-title-layout">
      <Form class="form-container formList" label-position="top">
        <Row :gutter="16">
          <Col span="24">
            <FormItem label="物料名称" class="custom-form-item">
              <Input disabled v-model="rowInfo.materialName" class="inputBorder"></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="批次号" class="custom-form-item">
              <Input disabled v-model="rowInfo.batchNumber||'--'" class="inputBorder"></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="数量" required class="custom-form-item">
              <Input type="number" v-model="materialCount" placeholder="请输入数量" class="inputBorder"
                     @on-blur="handleChange"></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem
                label="出库储位"
                prop="sourceStorageId"
                class="custom-form-item"
            >
              <el-select size="small" v-model="rowInfo.sourceStorageId" filterable placeholder="请选择" clearable
                         style="width:100%">
                <el-option-group
                    v-for="group in wareList"
                    :key="group.label"
                    :label="group.label">
                  <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </FormItem>
          </Col>


          <Col span="24">
            <FormItem
                label="入库储位"
                prop="targetStorageId"
                class="custom-form-item"
            >
              <el-select size="small" v-model="rowInfo.targetStorageId" filterable placeholder="请选择" clearable
                         style="width:100%">
                <el-option-group
                    v-for="group in wareList"
                    :key="group.label"
                    :label="group.label">
                  <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="outShow = false">取消</Button>
        <Button type="primary" @click="handleOut">确定</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="inShow" title="入库" class="modal-title-layout">
      <Form class="form-container formList" label-position="top">
        <Row :gutter="16">
          <Col span="24">
            <FormItem label="物料名称" class="custom-form-item">
              <Input disabled v-model="rowInfo.materialName" class="inputBorder"></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="批次号" class="custom-form-item">
              <Input disabled v-model="rowInfo.batchNumber||'--'" class="inputBorder"></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="数量" required class="custom-form-item">
              <Input type="number" disabled v-model="materialCount" placeholder="请输入数量" class="inputBorder"
                     @on-blur="handleChange"></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem
                label="出库储位"
                prop="sourceStorageId"
                class="custom-form-item"
            >
              <el-select size="small" v-model="rowInfo.sourceStorageId" filterable placeholder="请选择" clearable
                         style="width:100%">
                <el-option-group
                    v-for="group in wareList"
                    :key="group.label"
                    :label="group.label">
                  <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </FormItem>
          </Col>


          <Col span="24">
            <FormItem
                label="入库储位"
                prop="targetStorageId"
                class="custom-form-item"
            >
              <el-select size="small" v-model="rowInfo.targetStorageId" filterable placeholder="请选择" clearable
                         style="width:100%">
                <el-option-group
                    v-for="group in wareList"
                    :key="group.label"
                    :label="group.label">
                  <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </FormItem>
          </Col>

        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="inShow = false">取消</Button>
        <Button type="primary" @click="handleIn">确定</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="detailShow" title="详情" width="800" class="modal-title-layout">
      <Row :gutter="16">
        <Col span="12">
          <div class="detail-info">
            <div class="title-span">
              业务类型：
            </div>
            <div class="title-info">
              {{ detailRowInfo.transferType }}
            </div>
          </div>
        </Col>
        <Col span="12">
          <div class="detail-info">
            <div class="title-span">
              工序订单：
            </div>
            <div class="title-info">
              {{ detailRowInfo.procedureOrderId }}
            </div>
          </div>
        </Col>
      </Row>
      <Row :gutter="16" style="margin-top: 5px">
        <Col span="12">
          <div class="detail-info">
            <div class="title-span">
              出库储位：
            </div>
            <div class="title-info">
              {{ detailRowInfo.sourceStorageName }}
            </div>
          </div>
        </Col>
        <Col span="12">
          <div class="detail-info">
            <div class="title-span">
              入库储位：
            </div>
            <div class="title-info">
              {{ detailRowInfo.targetStorageName }}
            </div>
          </div>
        </Col>
      </Row>
      <Row :gutter="16" style="margin-top: 15px">
        <Col span="24" style="font-size: 16px;font-weight: 700">
          物料信息
        </Col>
        <Row :gutter="16" v-for="(item,index) of detailRowInfo.list" :key="index" style="padding-top: 5px">
          <Col span="24" style="padding: 5px 0 0 25px;font-size: 16px">
            {{ item.materialName }}
          </Col>
          <Col span="12" style="padding: 5px 0 0 25px;font-size: 16px">
            <span style="color: #999;font-size: 16px">数量：</span> {{ item.materialCount }}
          </Col>
          <Col span="12" style="padding: 5px 0 0 25px;font-size: 16px">
            <span style="color: #999;font-size: 16px">批次号：</span> {{ item.batchNumber || '-' }}
          </Col>
        </Row>
      </Row>
      <div slot="footer">
        <Button type="default" @click="detailShow = false">关闭</Button>
      </div>
    </Modal>

    <CreateOrUpdateModal :visible="createStatus" :form="wareForm" :title="wareForm.id ? '编辑' : '新增'"
                         :handleAddSubmit="handleAddSubmit" :closeSubmit="closeSubmit" :typeList="typeList"
                         :wareList="wareList"/>
  </div>
</template>
<script>
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from "@/mixins/toggleTableOperation";
import CreateOrUpdateModal from "./modal_open.vue";

export default {
  name: "materialTransferOrder", //出入库
  components: {
    search,
    CreateOrUpdateModal
  },
  mixins: [toggleTableOperation],
  data() {
    return {
      wareList: [],
      outFatherInfo: {}, //出库用父单据数据
      detailShow: false,
      outShow: false,
      inShow: false,
      detailRowInfo: {},
      materialCount: 1,
      pageSearch: {
        current: 1,
        pageSize: 10
      },
      rowInfo: {
        materialName: null,
        materialCount: null
      }, //左侧单击行数据L
      currentItem: {},
      deleteShow: false,
      deleteShowStorage: false,
      wareCodeList: [],
      infoList: [],
      storageList: [],
      wareForm: {
        list: [{
          materialCount: 1,
          materialId: null
        }],
        transferType: 'transfer'
      },
      storageForm: {},
      createStatus: false,
      storageCreateStatus: false,
      //一级搜索
      searchData: [
        {
          title: "任务单号",
          key: "code",
        }, {
          title: "出库储位",
          key: "sourceStorageId",  //sourceStorageId 出
          type: 'wareStorage',
          dicData: []
        },
        {
          title: "入库储位",
          key: "targetStorageId",  //sourceStorageId 出
          type: 'wareStorage',
          dicData: []
        }
      ],
      //一级table配置
      columns: [
        // {
        //   key: "selection",
        //   type: "selection",
        //   width: 60,
        //   align: "center",
        //   fixed: 'left'
        // },
        {
          title: '序号',
          width: 80,
          tree: true,
          key: 'id',
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.pageNum - 1) * this.pageSize + 1);
          },
        },
        {
          title: "任务单号",
          key: "code",
          minWidth: 150,
          resizable: true,
          align: "center",
        },
        {
          title: "业务类型",
          key: "transferType",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "出库储位",
          key: "sourceStorageName",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "入库储位",
          key: "targetStorageName",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "数量",
          key: "materialCount",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "创建人",
          key: "createUser",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        // {
        //   title: "入库储位",
        //   key: "warehouseFrozen",
        //   minWidth: 100,
        //   align: "center",
        //   resizable: true,
        //   tooltip: true,
        //   render: (h, params) => {
        //     return h('div', params.row.warehouseFrozen ? '是' : '否');
        //   }
        // },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 150,
          align: "center",
        },
      ],
      moldCode: "",
      id: "",
      typeList: [{
        value: "transfer",
        label: '调拔'
      },
        {
          value: "instock",
          label: '入库'
        },
        {
          value: "outstock",
          label: '出库'
        }
      ],
      loading: false,
      isTableVisible: true,
      // 一级二级弹窗显示
      create: false,
      createLink: false,
      //三级搜索参数
      searchParams: {},
      //一级页面分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0,
      bomDetail: false,
      delFaultCodeShowF: false, //是否显示删除弹窗
      pageSizeOption: [10, 20, 30, 40],
      delIds: [],
      selection: [],
      createByOptions: []
    };
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 400;
    },
  },
  mounted() {
    this.getTableColumnsWidth(this.columns);
    this.searchList();
    this.getSearchList();
  },
  methods: {
    formatStatus(row, column, cellValue) {
      switch (cellValue) {
        case 1:
          return '待处理';
        case 2:
          return '进行中';
        case 3:
          return '完结';
      }
    },
    getSearchList() {
      this.axios
          .get("/api/basedataWarehouse/queryAll", {}).then(res => {
        if (res.code == 200) {
          const list = res.data
          for (const item of list) {
            item.options = item.storageVOList
            item.value = item.id
            item.label = item.warehouseName
            // 改造成上下级
            if (item.storageVOList && item.storageVOList.length > 0) {
              for (const items of item.storageVOList) {
                items.options = items.storageName
                items.value = items.id
                items.label = items.storageName
              }
            } else {
              item.storageVOList = []
            }
          }
          this.wareList = list
          this.searchData[1].dicData = list
          this.searchData[2].dicData = list

        }
      })
    },
    overRow(e) {
      this.$confirm('是否确认完结?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios
            .post("/api/warehouseMaterialTransferOrder/finish", {id: e.id}).then(res => {
          if (res.code !== 200) {
            this.$Message.error(res.message);
            return false
          }
          this.$Message.success('完结成功');
          this.searchList()
        })
      })
    },
    transferTypeFormatter(row, column, cellValue) {
      const typeOptions = {
        transfer: '调拔',
        instock: '入库',
        outstock: '出库'
      };
      return typeOptions[cellValue] || '';
    },
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      return 'background:	#F3F5F7;font-weight:500;color:#777';
    },

    handleExpandChange(row, expandedRows) {
      // 当行展开或折叠时触发此方法
      if (expandedRows.includes(row)) {
        this.axios
            .post("/api/warehouseMaterialTransferOrder/getDetailById", {
              id: row.id
            })
            .then((res) => {
              if (res.code !== 200) {
                this.$Message.warning(res.message);
                return false
              }
              const list = JSON.parse(JSON.stringify(this.infoList))
              list.forEach((param, index) => {
                if (param.id === row.id) {
                  const loop = JSON.parse(JSON.stringify(res.data.children))
                  for (const items of loop) {
                    items.sourceStorageId = row.sourceStorageId
                    items.targetStorageId = row.targetStorageId
                  }
                  list[index].children = loop
                }
              })
              this.infoList = JSON.parse(JSON.stringify(list))
            })
      } else {
        // 折叠时
        // 在需要刷新表格时
        this.searchList()
        // 在需要刷新表格时

      }
    },
    // 点击展示子集
    handleLoadData(item, callback) {
      this.axios
          .post("/api/warehouseMaterialTransferOrder/getDetailById", {
            id: item.id
          })
          .then((res) => {
            if (res.code !== 200) {
              this.$Message.warning(res.message);
              return false
            }
            callback(res.data.children)
          })
    },
    detailRow(e) {
      this.detailRowInfo = e
      this.axios
          .post("/api/warehouseMaterialTransferOrder/getDetailById", {
            id: this.detailRowInfo.id
          })
          .then((res) => {
            if (res.code !== 200) {
              this.$Message.warning(res.message);
              return false
            }
            this.detailRowInfo.list = res.data.children
            this.detailShow = true
          })
    },
    // 入库确认
    handleIn() {
      const param = this.rowInfo
      if (this.materialCount == 0) {
        this.$Message.warning('请输入数量')
        return false
      }
      param.materialCount = this.materialCount
      this.outFatherInfo.details = [param]
      this.outFatherInfo.tasks = [param]

      this.axios
          .post("/api/warehouseMaterialTransferOrder/inStock", this.outFatherInfo)
          .then((res) => {
            if (res.code !== 200) {
              this.$Message.warning(res.message);
              return false
            }
            this.inShow = false
            this.searchList()
          })
    },
    // 出库确认
    handleOut() {
      const param = this.rowInfo
      if (this.materialCount == 0) {
        this.$Message.warning('请输入数量')
        return false
      }
      param.materialCount = this.materialCount
      this.outFatherInfo.details = [param]
      this.axios
          .post("/api/warehouseMaterialTransferOrder/outStock", this.outFatherInfo)
          .then((res) => {
            if (res.code !== 200) {
              this.$Message.warning(res.message);
              return false
            }
            this.outShow = false
            this.searchList()
          })
    },
    // 点击入库
    handleEditRowIn(row) {
      const param = JSON.parse(JSON.stringify(row))
      this.rowInfo = param
      this.materialCount = JSON.parse(JSON.stringify(param.materialCount))
      // 循环列表 找出子单据的父级
      // 提交时只提交父级和该条子单据
      for (const item of this.infoList) {
        if (item.children && item.children.length > 0) {
          for (const items of item.children) {
            if (items.id === this.rowInfo.id) {
              this.outFatherInfo = item
            }
          }
        }
      }
      this.inShow = true;
    },
    // 点击出库
    handleEditRow(row) {
      const param = JSON.parse(JSON.stringify(row))
      this.rowInfo = param
      this.materialCount = JSON.parse(JSON.stringify(param.materialCount))
      // 循环列表 找出子单据的父级
      // 提交时只提交父级和该条子单据
      for (const item of this.infoList) {
        if (item.children && item.children.length > 0) {
          for (const items of item.children) {
            if (items.id === this.rowInfo.id) {
              this.outFatherInfo = item
            }
          }
        }
      }
      this.outShow = true;
    },
    closeSubmit() {
      this.wareForm = {}
      this.createStatus = false;
    },
    closeSubmitStorages() {
      this.storageCreateStatus = false;
    },
    // 右侧编辑
    handleAddSubmitStorages() {
      if (this.storageForm.id) {
        this.axios
            .put("/api/basedataStorage/update", this.storageForm)
            .then((res) => {
              if (res.code !== 200) {
                this.$Message.warning(res.message);
                return false
              }
              this.storageCreateStatus = false;
              this.searchList();
            })
            .catch((error) => {
              console.error("Error submitting form:", error);
            });
      } else {
        this.axios
            .post("/api/basedataStorage/save", this.storageForm)
            .then((res) => {
              if (res.code !== 200) {
                this.$Message.warning(res.message);
                return false
              }
              this.storageCreateStatus = false;
              this.searchList();
            })
            .catch((error) => {
              console.error("Error submitting form:", error);
            });
      }
    },
    handleAddSubmit(e) {
      // 新增新建保存
      const param = e
      param.details = param.list
      if (param.list.length == 0) {
        this.$Message.warning('请选择物料');
        return false
      }
      for (const item of param.list) {
        if (!item.materialId) {
          this.$Message.warning('请选择物料');
          return false
        }
        if (!item.materialCount || item.materialCount === 0) {
          this.$Message.warning('请输入数量');
          return false
        }
      }
      this.axios
          .post("/api/warehouseMaterialTransferOrder/save", param)
          .then((res) => {
            if (res.code !== 200) {
              this.$Message.warning(res.message);
              return false
            }
            this.createStatus = false;
            this.wareForm = {}
            this.searchList();
          })
          .catch((error) => {
            console.error("Error submitting form:", error);
          });
    },
    handleAdd() {
      this.wareForm = {
        list: [{
          materialCount: 1,
          materialId: null
        }]
      };
      this.createStatus = true;
    },
    handleAddStorage() {
      if (this.rowInfo.id)
        this.storageForm = {
          warehouseId: this.rowInfo.id
        };
      this.storageCreateStatus = true;
    },
    reset() {
      this.searchParams = {};
      this.changeNum();
    },
    handleChange() {
      // 检查输入值是否大于物料数量
      if (this.materialCount > this.rowInfo.materialCount) {
        // 如果大于，则设置为物料数量
        this.materialCount = this.rowInfo.materialCount.toString();
      }
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(val) {
      this.pageSearch.pageSize = val;
      this.searchList();
    },
    changePageNum(val) {
      this.pageSearch.current = val;
      this.searchList();
    },
    getSearch(arg) {
      this.searchParams = arg[0] || {};
      this.searchList();
    },
    //查询列表
    searchList() {
      this.isTableVisible = false;
      this.axios
          .post("/api/warehouseMaterialTransferOrder/listByPojoPage", {
            ...this.pageSearch,
            ...this.searchParams,
            ...{
              transferType: 'transfer'
            }
          }).then(res => {
        if (res.code === 200) {
          const list = JSON.parse(JSON.stringify(res.data.records))
          for (const item of list) {
            item._loading = false
          }
          this.infoList = list
          this.total = res.data.total

        } else {
          this.$Message.warning({
            content: res.message,
            duration: 6,
            closable: true
          });
        }
      });
      this.$nextTick(() => {
        this.isTableVisible = true;
      });
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
    },
    //批量删除
    delRowBetch() {
      if (this.delIds1.length == 0) {
        this.$Message.warning({
          content: `${this.$t("common.deleteItems")}`,
          duration: 6,
          closable: true
        });
      } else {
        this.delFaultCodeShowF = true;
      }
    },
    //删除
    delRow(row) {
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true;
      this.delIds1 = [];
      this.delIds1.push(row.id);
    },
  }
};
</script>

<style scoped lang="scss">
.btn-box {
  padding: 8px 5px !important;
}

.flexTable {
  display: flex;
}

.table-div-body {
  width: 50%;
}

.detail-info {
  display: flex;

  .title-span {
    width: 100px;
    font-size: 16px;
    color: #999;
  }

  .title-info {
    width: 300px;
    font-size: 16px;
  }
}

.cil-table {
  padding: 2px 20px;
}

</style>
